<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css3动画/reset.css" />
		<style type="text/css">
			body {
				background-color: #222;
				display: flex;
				height: 100vh;
				align-items: center;
				justify-content: center;
				color: pink;
			}

			.content {
				padding: 2em 0;
			}

			h2 {
				font-size: 48px;
				font-weight: bold;
				text-align: center;
				line-height: 1.6;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="htmleaf-content">
				<h2 class="slowNumber">100.999</h2>
				<h2 class="slowNumber">1245634,4245644</h2>
			</div>
		</div>

	</body>
	<script>
		var easing = {
			quadratic: function(x) {
				return Math.sqrt(x);
			}
		};

		function range(start, stop, step) {
			var array = [];
			for (var i = start; i < stop; i += step) array.push(i);
			return array;
		}

		function interpolation(fps, easing, finalValue) {
			function scaleIt(value) {
				return finalValue * value;
			}

			var x = range(0, 1, 1 / fps),
				y = x.map(easing).map(scaleIt);

			return y;
		}

		function animateEl(values, duration, onAnimate) {
			var frameIndex = 0,
				fps = values.length,
				id = setInterval(anime, duration / fps);

			function anime() {
				var current = values[frameIndex],
					isLastFrame = (frameIndex === fps - 1);

				onAnimate(current, frameIndex, values);

				if (isLastFrame) {
					clearInterval(id);
				} else {
					frameIndex++;
				}
			}
		}

		function round(value, decimals) {
			return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
		}

		function unformat(content) {
			var unlocalized = content.replace('.', '').replace(',', '.'),
				value = parseFloat(unlocalized);
			return value;
		}

		function format(value) {
			return value.toString().replace('.', ',');
		}

		window.addEventListener("DOMContentLoaded", function() {
			var fps = 20,
				els = [].slice.call(document.querySelectorAll('.slowNumber'));
				console.log(els)

			els.forEach(function(el) {
				var content = (el.firstChild.textContent).trim(),
					decimalPlaces = content.split(',')[1] || '',
					value = unformat(content),
					values = interpolation(fps, easing.quadratic, value);
					console.log(content)

				animateEl(values, 1000, function(current, i, values) {
					var isLast = (i === values.length - 1),
						value = round(current, decimalPlaces.length);
					el.firstChild.textContent = isLast ? content : format(value);
				});
			});
		});
	</script>
</html>
